<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渝中区信息化项目管理系统</title>
    <style>
      body {
        height: 100%;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, Arial, sans-serif;
      }
      html {
        height: 100%;
        width: 100%;
      }
      body,
      div,
      dl,
      dt,
      dd,
      ul,
      ol,
      li,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      pre,
      code,
      form,
      input,
      button,
      textarea,
      p,
      th,
      td {
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
      }
      fieldset,
      img {
        border: 0;
      }
      ul,
      ol,
      li {
        list-style: none;
        font-family: "Microsoft YaHei";
      }
      #pageBox {
        width: 100%;
        height: 100%;
      }
      .title-container {
        height: 3.875rem;
        background-color: #3171ee;
      }
      .title-container div {
        height: 1.25rem;
      }
      .title-container p {
        height: 2.625rem;
        line-height: 2.625rem;
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        font-weight: 600;
        font-size: 1.0625rem;
      }
      .content-container {
        width: 100%;
        height: calc(100% - 62px);
        background: url("./imgs/bg_img.png") no-repeat;
        background-size: 100%;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
      }
      .content-img {
        width: 6.875rem;
        height: 6.875rem;
        margin-top: 10px;
      }
      .content-title {
        margin: 7px 0 80px;
        height: 4.5rem;
        font-size: 1.5rem;
        font-weight: 700;
        text-align: CENTER;
        color: #ffffff;
      }
      .content-btn {
        margin-top: 40px;
        width: 10.125rem;
        height: 3.5rem;
        line-height: 3.5rem;
        background: #3272ef;
        border: 1px solid #ffffff;
        border-radius: 74px;
        box-shadow: 0px 12px 8px 0px rgba(36, 94, 219, 0.25);
        color: #ffffff;
        text-align: center;
      }
      .content-inp {
        width: 19.5rem;
        height: 4.5rem;
        background: #ffffff;
        border-radius: 13px;
      }
      input[type="text"],
      #btn1,
      #btn2 {
        box-sizing: border-box;
        text-align: center;
        font-size: 1.4em;
        height: 4.5rem;
        border-radius: 13px;
        border: 1px solid #c8cccf;
        color: #6a6f77;
        -web-kit-appearance: none;
        -moz-appearance: none;
        display: block;
        outline: 0;
        padding: 0 1em;
        text-decoration: none;
        width: 100%;
      }
      input[type="text"]::placeholder {
        color: #2d6beb;
        font-size: 17px;
      }
      #alertDialogDemo{
        width: 100%;
        height: 100%;
        background: transparent;
        position: fixed;
        left: 0;
        top: 0;
        /* display: flex; */
        align-items: center;
        justify-content: center;
        display: none;
      }
      #alertDialogDemo #alertDialog{
        width: 18rem;
        height: 88px;
        line-height: 88px;
        background: rgba(0,0,0,0.75);
        border-radius: 4px;
        color: #fff;
        text-align: center;
        font-size: 17px;
      }
      #alertDialogDemo #alertDialog #cancelAlertDialog{
        width: 22px;
        height: 22px;
        position: relative;
        top: -25px;
        right: -35px;
      }
    </style>
    <script src="./js/axios.min.js"></script>
  </head>
  <body>
    <div id="pageBox">
      <div class="title-container">
        <div></div>
        <p></p>
      </div>
      <div class="content-container">
        <img src="./imgs/sign_img.png" class="content-img" />
        <div class="content-title">
          <div>渝中区信息化项目</div>
          <div>管理系统</div>
        </div>
        <div class="content-inp">
          <input type="text" placeholder="请输入验证码" id="inpVal" />
        </div>
        <div class="content-btn" id="confirmBtn">确认</div>
      </div>
    </div>
    <div id="alertDialogDemo">
      <div class="alert-dialog" id="alertDialog">
        验证码错误，请重新输入
        <img src="./imgs/cancel_icon.png" id="cancelAlertDialog">
      </div>
    </div>
  </body>
  <script>
    let confirmBtnDom = document.querySelector("#confirmBtn");
    let inpValue = document.getElementById("inpVal");
    let alertDialogDemoDom = document.getElementById("alertDialogDemo");
    let cancelAlertDialogDom = document.getElementById("cancelAlertDialog");
    var url = window.location.href;
    // 返回当前页面的路径和文件名，如：/testdemo/test.html
    var pathname = window.location.pathname;
    // 返回 web 主机的端口，如：8080
    var port = window.location.port;
    // 返回所使用的 web 协议，如：http:
    var protocol = window.location.protocol;
    // 获取参数，如：?id=1&name=test
    var search = window.location.search;
    // 获取指定参数值
    var uuid = getURLParameter(url,"uuid"); // 1
    var reviewTaskId = getURLParameter(url,"reviewTaskId"); // test
    var userId = getURLParameter(url,"userId"); // test

    function getURLParameter(url, paramName) {
      var urlParams = url.split("?")[1]; //或者url.search获取参数字符串
      var paramArray = urlParams.split("&");
      var len = paramArray.length;
      var paramObj = {}; //json对象
      var arr = []; //数组对象
      for (var i = 0; i < len; i++) {
        arr = paramArray[i].split("=");
        paramObj[arr[0]] = arr[1];
      }
      for (key in paramObj) {
        if (key == paramName) {
          return paramObj[paramName];
          break;
        }
      }
    }
    // 确定按钮事件监听
    confirmBtnDom.addEventListener("click", () => {
      console.log("验证码", inpValue.value);
      axios({
        method: "get",
        url: "/yzq_manage_api/h5/validateCaptcha",
        params: {
          code: inpValue.value,
          uuid: uuid,
          reviewTaskId: reviewTaskId,
          userId: userId,
        },
      }).then(res=>{
        if(res.data.code === 200 ){
          window.location.href='./acceptTaskDetails.html?reviewTaskId=' + reviewTaskId + '&userId=' + userId
        }else{
          // alert(res.data.msg)
          alertDialogDemoDom.style.display='flex';
        }
      });
    });
    // 点击关闭弹窗按钮
    cancelAlertDialogDom.addEventListener('click',()=>{
      alertDialogDemoDom.style.display='none';
    })
  </script>
</html>
